<template>
	<view>
		<!-- 搜索 -->
		<view class="search">
			<text class="title">广软医院</text>
			<u-search placeholder="请输入搜索的药品" @focus="focusHandler" :show-action="false" :clearabled="false"></u-search>
		</view>
		<!-- 取药 -->
		<view class="saoma" @click="quyao">
			<image src="/static/取药.png" mode=""></image>
			<view class="saoma_message">
				<text class="text1">一键取药</text>
				<text class="text2">轻松取，快速拿</text>
			</view>
		</view>
		<!-- 药品集合 -->
		<scroll-view scroll-x="true">
			<view class="medicines">
				<view class="medicine_item" v-for="(i, v) in test_medicine">
					<image src="/static/icon4.png" mode=""></image>
					<text>测试药品</text>
				</view>
			</view>
		</scroll-view>

		<view class="news">
			<sun-newlist v-for="(item,index) in newlist" :key="index" :title="item.title"
				:author_name="item.author_name" :date="item.date" :image="item.thumbnail_pic_s" :newUrl="item.url"
				:index_num="index">
			</sun-newlist>
		</view>
		<u-loadmore v-if="loadingShow" marginTop="20" marginBottom="20" :status="status" />



	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				keyword: '',
				newlist: [], // 新闻列表
				test_medicine: 8,
				page: 1,
				page_size: 10,
				status: 'loading',
				loadingShow: false
			};
		},
		computed: {
			...mapState('m_user', ['test'])
		},
		onLoad() {
			this.getNewMessage(this.page, this.page_size)
		},
		// 发送给朋友
		onShareAppMessage(res) {
			return {
				title: '欢迎使用发药系统',
				type: 0,
				path: '/pages/home/home',
				summary: "",
				imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
			}
		},
		// 分享到朋友圈
		onShareTimeline(res) {
				return {
					title: '欢迎使用发药系统',
					type: 0,
					query: 'id=',
					summary: "",
					imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
			}
		},
		onReachBottom() {
			this.loadingShow = true
			setTimeout(() => {
				this.page = 2
				this.getNewMessage(this.page, this.page_size)
				this.loadingShow = false
			}, 1000)
		},
		methods: {
			async searchHandler() {
				// console.log(this.keyword)
				const {
					data: res
				} = await uni.$http.get('/medicines/search/?name=' + this.keyword)
				console.log(res);
			},
			quyao() {
				uni.navigateTo({
					url: '/pages/getmedicine/getmedicine'
				})
			},
			focusHandler() {
				uni.navigateTo({
					url: '/pages/search/search?search=2'
				})
			},
			// 获取新闻列表
			async getNewMessage(page, page_size) {
				let str1 = 'ff920ecf9df8f5fdc162287ad8e363d0'
				let str2 = '8110004ee3f544cb2a983cfbc72ad055'
				const {
					data: res
				} = await uni.$http.get('http://v.juhe.cn/toutiao/index?type=jiankang&is_filter=1&key=' + str2 +
					'&page_size=' +
					page_size + '&page=' + page)
				this.newlist = res.result.data
				console.log(this.newlist);
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: #f3f4f8;
	}

	.search {
		width: 100%;
		height: 400rpx;
		// background-color: #3ec1f8;
		// background-image: linear-gradient(180deg, #3ec1f8 0%, #2af598 100%);
		background-color: #3ec1f8;
		background-image: linear-gradient(180deg, #3ec1f8 0%, #B721FF 100%);
		display: flex;
		align-items: center;
		padding-left: 8px;
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;

		.u-search {
			width: 180%;
		}

		.title {
			position: absolute;
			font-size: 25px;
			color: white;
			top: 10px;
			left: 134px;
		}
	}

	.saoma {
		background-color: white;
		width: 90%;
		height: 100px;
		position: absolute;
		top: 300rpx;
		left: 37.5rpx;
		border-radius: 5px;
		display: flex;
		justify-items: center;
		padding-left: 20px;
		padding-top: 15px;

		image {
			width: 150rpx;
			height: 140rpx;
		}

		.saoma_message {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.text1 {
				color: #4a4a4a;
				font-weight: bold;
				font-size: 25px;
			}

			.text2 {
				color: #bababa;
				font-size: 15px;
			}
		}
	}

	.medicines {
		background-color: #f3f4f8;
		height: 110px;
		width: 90%;
		// margin-top: 70px;
		margin-left: 37.5rpx;
		display: flex;

		.medicine_item {
			border-radius: 5px;
			background: #ffffff;
			box-shadow: 7px 7px 14px #e0e0e0,
				-7px -7px 14px #ffffff;

			height: 100px;
			margin-right: 10px;
			display: flex;
			// display: inline-block;
			flex-direction: column;
			justify-items: center;
			justify-content: space-around;

			image {
				width: 70px;
				height: 70px;
			}

			text {
				margin-left: 7px;
			}
		}
	}

	scroll-view {
		display: flex;
		width: 95%;
		margin-left: 5rpx;
		white-space: nowrap;
		margin-top: 70px;
	}

	.news {
		margin-top: 10px;
	}
</style>
